<template>
 <el-main>
  <div class="menmuTitle"><h1>{{ $t('user.certification.title') }}</h1></div>

  <el-input v-model="input" :placeholder="$t('user.certification.code')"></el-input>

  <el-button type="primary">{{ $t('user.certification.button') }}</el-button>

  <div class="text">
   <h6>{{ $t('user.certification.title1') }}</h6>
   <p v-html="$t('user.certification.text1')"></p>

   <h6>{{ $t('user.certification.title2') }}</h6>
   <p v-html="$t('user.certification.text2')"></p>
  </div>
 </el-main>
</template>

<script>
export default {
 name: "Products",
 data: () => ({
  input: ''
 })
}
</script>

<style scoped lang="scss">
.el-main {
 .menmuTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;

  h1 {
   font-size: 20px;
   font-weight: bold;
   color: #002445;
   position: relative;
   padding-bottom: 10px;

   &:after {
    display: block;
    content: "";
    width: 140px;
    height: 2px;
    background: #0d4fa5;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 4px;
   }
  }
 }

 .el-input {
  max-width: 50%;
  margin: 40px 0;

  /deep/ .el-input__inner {
   height: 44px;
   border: 1px solid #0d4eaa;
  }
 }

 .el-button {
  margin-right: auto;
  background-color: #0d4eaa;
  border: none;
  padding: 6px 30px;
  height: 36px;
  font-weight: bold;
  margin-bottom: 40px;
 }

 .text {
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  color: #292929;
  line-height: 1.8em;
  font-size: 14px;

  h6 {
   margin-bottom: 10px;
   color: #292929;
   font-size: 14px;
   font-weight: 500;
  }

  p {
   font-size: 14px;
   color: gray;
   padding-bottom: 30px;
   line-height: 1.8em;
  }
 }
}
</style>
